<template>
    <div class='login'>
        <el-dialog :visible.sync="loginDialogVisible" min-width="20%" width="45%" :before-close="handleClose" class="login-dialog">
            <div class="login-wrapper">
                <div style="text-align:center;width: 100%;">
                    <img height="180px" src="../../assets/logo.jpg" alt="" class="login-logo">
                </div>
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
                    <el-form-item prop="url" v-if="urlMod">
                        <el-input v-model="loginForm.url" @blur="refreshRootUrl" @change="refreshRootUrl" placeholder="http://www.xxx.xxx:9306">
                            <i slot="prefix" class="iconfont icon-home"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="loginForm.phone" @change="refreshVerificationCode" placeholder="请输入帐号登录">
                            <i slot="prefix" class="iconfont icon-phone"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input v-model="loginForm.pwd" placeholder="请输入密码" show-password>
                            <i slot="prefix" class="iconfont icon-pwd"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="pwd" style="display: flex;">
                        <el-input style="width: 80%;" v-model="loginForm.vercode" placeholder="请输入验证码" @keyup.enter.native="submitForm()">
                            <i slot="prefix" class="iconfont icon-pwd"></i>
                        </el-input>
                        <div style="display: inline-block;width: 20%;">
                            <el-image style="width: 100px;height: 30px;top: 8px;" v-if="vercode" :src="vercode" title="点击更换验证码" @click="refreshVerificationCode"/>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">登录</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import aes from '@utils/aes'
export default {
    components: {},
    data () {
        // 这里存放数据
        return {
            // 是否允许修改后台地址
            urlMod: true,
            loginForm: {
                url: window.localStorage.rootUrl,
                phone: '',
                pwd: '',
                vercode: ''
            },
            loginFormRules: {
                phone: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
                pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                vercode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            // 验证码src
            vercode: null
        }
    },
    // 监听属性 类似于data概念
    computed: {
        ...mapGetters(['loginDialogVisible'])
    },
    mounted () {
        // web环境不需要修改后台地址，仅electron需要
        if (this.$http.env() === 'web') {
            this.urlMod = false
        }
        // 回显用户名
        if (window.localStorage.login_userId) {
            try {
                this.loginForm.phone = aes.decrypt(window.localStorage.login_userId)
                this.refreshVerificationCode()
            } catch (e) {
                console.error(e)
            }
        }
        // 回显密码
        if (window.localStorage.login_pwd) {
            this.loginForm.pwd = aes.decrypt(window.localStorage.login_pwd)
            console.log('[信息]密码回显', window.localStorage.login_pwd, this.loginForm.pwd)
        }
    },
    // 方法集合
    methods: {
        ...mapMutations(['setLogin', 'setUserInfo', 'setLoginDialog']),
        handleClose () {
            this.setLoginDialog(false)
        },
        submitForm () {
            this.$refs.loginFormRef.validate(async (valid) => {
                if (valid) {
                    const { data: res } = await this.$http.login({
                        username: this.loginForm.phone,
                        password: this.loginForm.pwd,
                        vercode: this.loginForm.vercode
                    })
                    window.console.log('[信息]登录返回信息', res)
                    if (res.code !== 200) {
                        this.$msg.error(res.message)
                        this.refreshVerificationCode()
                    } else {
                        window.localStorage.setItem('LOGIN_RESULT', JSON.stringify(res.result))
                        window.localStorage.setItem('token', res.result.token)
                        window.sessionStorage.setItem('cookie', res.result.cookie)
                        window.localStorage.setItem('userId', res.result.loginCode)
                        window.localStorage.setItem('login_userId', aes.encrypt(res.result.loginCode))
                        window.localStorage.setItem('login_pwd', aes.encrypt(this.loginForm.pwd))
                        this.getUserInfo(res.result)
                        this.setLoginDialog(false)
                        window.localStorage.setItem('isLogin', true)
                        this.$http.reLoadInstance()
                        window.console.log('[信息]登录保存信息', window.localStorage.userId, window.localStorage.token)
                        window.location.reload()
                    }
                }
            })
        },
        async getUserInfo (userInfo) {
            window.localStorage.setItem('userInfo', JSON.stringify(userInfo))
            this.setLogin(true)
            this.setUserInfo(userInfo)
        },
        /**
         * 刷新网址
         */
        refreshRootUrl () {
            this.$http.setRootUrl(this.loginForm.url)
        },
        /**
         * 刷新二维码
         */
        refreshVerificationCode () {
            this.vercode = this.$http.getVercode(this.loginForm.phone)
        }
    }
}
</script>
<style scoped lang="less">
.login-logo {
    margin: 0 50px;
}
.login-dialog {
    .login-wrapper{
        margin-left: 10%;
        margin-right: 10%;
    }

    /deep/.el-dialog__body {
        padding: 30px 20px 0;
    }

    .dialog-footer {
        position: relative;
        z-index: 2;
        display: block;
        // width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 100px;

        .el-button {
            width: 100%;
        }
    }

    /deep/.el-dialog__footer {
        position: relative;

        &:after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            content: "";
            width: 100%;
            height: 100%;
            opacity: .3;
            background: url(../../assets/login_bg2.jpg) center bottom no-repeat;
            background-size: contain;
        }
    }
}

</style>
